<template>
  <a-card :bordered="false" title="">
    <a-form-model
      class="mt-6"
      ref="form"
      v-bind="{
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      }"
    >
      <a-form-model-item label="用户名">
        {{ user.username }}
      </a-form-model-item>

      <a-form-model-item label="可用FCB">
        {{ user.coins }}
      </a-form-model-item>

      <a-form-model-item label="下发手续费">
        {{ user.tip }} / 笔
      </a-form-model-item>

      <a-form-model-item label="买币手续费">
        {{ user.fee_ratio * 1000 }} ‰ / 笔
      </a-form-model-item>

      <a-form-model-item label="上次登录IP">
        {{ user.login_ip }}
      </a-form-model-item>

      <a-form-model-item label="上次登录时间">
        {{ user.login_at }}
      </a-form-model-item>

      <a-form-model-item label="注册时间">
        {{ user.created_at }}
      </a-form-model-item>
    </a-form-model>
    <!-- <modal-auth
      v-if="api_switch != 0"
      ref="auth"
      @password-checked="pass = true"
    /> -->
  </a-card>
</template>

<script>
export default {
  // components: { whitelist, editInput, modalAuth },
  computed: {
    user() {
      return this.$store.state.account.user
    },
  },
  data() {
    return {
      token: '',
      star: true,
      pass: false,
      act: '',
      api_switch: '0',
    }
  },
  created() {
    // this.axios.get('/api-switch').then((res) => {
    //   this.api_switch = res.data.data
    // })
  },
  mounted() {
    this.token = this.starToken()
  },
  methods: {
    toggleView() {
      if (!this.star) {
        this.star = true
        this.token = this.starToken()
        return
      }
      if (this.pass) {
        this.star = false
        this.token = this.user.api_token
        return
      }
      this.act = 'view-password'
      this.$refs.auth.open()
    },
    starToken() {
      const token = this.user.api_token
      const stars = '*'.repeat(token.length - 16)
      return token.replace(/^(\w{8}).+(\w{8})$/, `$1${stars}$2`)
    },
    generateToken() {
      if (this.pass) {
        this.getToken()
      } else {
        this.act = 'generate-token'
        this.$refs.auth.open()
      }
    },
    getToken() {
      this.axios.get('/s/api-token/generate').then((res) => {
        this.$message.success('已重置')
        this.$store.commit('account/setUser', {
          ...this.user,
          api_token: res.data.data,
        })
        this.token = this.star ? this.starToken() : this.user.api_token
      })
    },
    editWhitelist() {
      if (this.pass) {
        this.$refs.whitelist.editable = true
      } else {
        this.act = 'edit-whitelist'
        this.$refs.auth.open()
      }
    },
    editUrl() {
      if (this.pass) {
        this.$refs.url.editable = true
      } else {
        this.act = 'edit-url'
        this.$refs.auth.open()
      }
    },
  },
  watch: {
    pass(val) {
      if (!val) {
        return
      }
      if (this.act === 'view-password') {
        this.star = false
        this.token = this.user.api_token
      }

      if (this.act === 'generate-token') {
        this.getToken()
      }

      if (this.act === 'edit-whitelist') {
        this.$refs.whitelist.editable = true
      }

      if (this.act === 'edit-url') {
        this.$refs.url.editable = true
      }
    },
  },
}
</script>

<style>
</style>